<template>
  <div>
    <v2-main>
      <v2-header>
        <template #right>
          <el-input size="small" class="mar-rl-10px">
            <el-button slot="append" icon="el-icon-search" @click.native="search()"></el-button>
          </el-input>
          <el-button size="small" class="mar-rl-10px" @click="upcreateTimeChapter(0)">添加章节</el-button>
        </template>
      </v2-header>
      <el-table
          :data="chapterList"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          size="small"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
            prop="createTime"
            label="创建时间">
        </el-table-column>
        <el-table-column
            prop="name"
            label="章节名称">
        </el-table-column>

        <el-table-column
            prop="name"
            label="类型">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.type === 0 ? 'primary' : 'success'"
                disable-transitions>{{scope.row.type === 0 ? "章节" : "小结"}}</el-tag>
          </template>

        </el-table-column>

        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(1, scope.row)">
              <i class="el-icon-edit-outline "></i>编辑
            </el-button>
            <el-button size="mini"  type="info" @click="handleAdd(scope.row)" v-if="scope.row.type === 0">
              <i class="el-icon-plus "></i>添加
            </el-button>
            <el-button size="mini" @click="handleEditCode( scope.row)" v-if="scope.row.type !== 0">
              <i class="el-icon-edit-outline "></i>编写内容
            </el-button>
            <el-button size="mini"  type="danger" @click="handleDelete(scope.$index, scope.row)">
              <i class="el-icon-delete "></i>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </v2-main>
    <dialog-form :fields="contentExRows" v-model="show" :title="title" @submit="submit" :form-data="currData"></dialog-form>
  </div>
</template>

<script>
import v2Main from "components/v2-cps/v2-main";
import {mapGetters} from "vuex";
import v2Header from "components/v2-cps/v2-header";
import contentex from "@/api/learn/contentex"
import content from "@/api/learn/content"
import ApiResponse from "utils/ApiResponse";
import dialogForm from "components/v2-form/dialogForm";
import Constants from "@/Constants";
import msgUtil from "utils/msgUtil";
export default {
  name: "index",
  components:{v2Main ,v2Header ,dialogForm} ,
  data(){
    return {
      chapterList:[] ,
      state: 0 ,
      params:{} ,
      show: false ,
      parentId: 0 ,
      currData: {}
    }
  },
  created() {
    this.params.bookId = this.book.id
    this.list()
  },
  methods:{
    list(){
      contentex.getList(this.params).then(res=>{
        let response = new ApiResponse(res)
        response.ok((data)=>{
          this.chapterList = data
        })
      })
    },
    upcreateTimeChapter(state){
      this.state = state ;
      this.show = true ;
      this.currData = {parentId: 0}
    },
    search(){
      this.list()
    },
    submit(data){
      data.bookId = this.book.id ;
      content.add(data).then(res=>{
        let response = new ApiResponse(res) ;
        response.ok(()=>{
          this.list()
          this.show = false ;
          this.$store.commit(Constants.learnCtSidebarRefresh)
        }).print()
      })
    },
    handleEdit(state , row){
      this.state = state ;
      this.currData = row ;
      this.show = true ;
    },
    handleEditCode(row){
      this.$router.push({
        path: '/updateSection',
        query:{
          id: row.id
        }
      })
    },
    handleAdd(row){
      this.state = 0 ;
      this.currData = {parentId: row.id}
      this.show = true ;
    },
    handleDelete(index,row){
      msgUtil.delConfirm(
          "确认删除该记录吗？",
          (res)=>{
            content.remove(row.id).then(res=>{
              let response = new ApiResponse(res) ;
              response.ok(res=>{
                this.list()
                this.$store.commit(Constants.learnCtSidebarRefresh) ;
              }).print()
            })
          }
      )
    }
  },
  computed:{
    title(){
      return this.state === 0 ? "添加":'修改' ;
    },
    ...mapGetters(['book',"bookActiveId"]),
    contentExRows(){
      return [
        {
          is: 'select' ,
          title: '类型',
          key: 'type',
          disabled: ()=>{
            return this.state !== 0
          },
          required: true ,
          attrs:{
            config:{
              options:[
                {
                  label: '章节',
                  value: 0
                },
                {
                  label: '小节',
                  value: 1
                }
              ]
            }
          },

        },
        {
          key: 'name',
          title: '名称' ,
          required: true ,

        },
        {
          key: 'sort',
          title: '排序',
          is: 'number'
        }
      ]
    }
  }
}
</script>

<style scoped>
  .mar-r-10px{
    margin-right: 10px ;
  }
</style>
